<template>
  <div class="route add page">
    <div class="title">药店管理</div>
    <div class="from">
      <select-txt @change="change"   :options="users" :alias="userAlias"  :item="userItem"    label="选择用户" class="plane" color="#009C4E" ></select-txt>
      <select-txt   :options="shops" :alias="shopAlias"  :items="shopItems"    label="选择药店" class="plane" color="#F9A528" ></select-txt>
    </div>
    <div class="btn" @click="confirm">提交</div>
  </div>
</template>

<script>
import { shop } from '@/api/route'
import SelectTxt from '@/components/form/select-txt'
import { listShop, listShopByUserId } from '@/api/shop'
import { sTop } from '@/api/user'
import { showAlert } from '@/dialog'
export default {
  created () {
    listShop().then(res => {
      this.shops = res.data
    })
    sTop().then(res => {
      this.users = res.data
    })
  },
  computed: {

  },
  methods: {
    change (text, value) {
      listShopByUserId(value).then(res => {
        if (res.data.length === 0) return
        this.shopItems = res.data.map(m => {
          return { text: m.shopName, value: m.id }
        })
      })
    },
    confirm () {
      const userId = this.userItem.value
      const shopIds = this.shopItems.map(item => item.value)
      shop(userId, shopIds).then(res => {
        showAlert('操作成功').then(res => {
          this.$router.back()
        })
      })
    }
  },
  data () {
    return {
      users: [],
      shops: [],
      shopAlias: {
        value: 'id',
        text: 'shopName'
      },
      userAlias: {
        value: 'id',
        text: 'name'
      },
      shopItems: [{}],
      userItem: {}
    }
  },
  components: {
    SelectTxt
  }
}
</script>

<style scoped lang="stylus">
.route
  .title
    margin 15px 0
    dpr-font(18px)
    color #55545D
    display flex
    justify-content center
  .btn
    margin-top 20px
    background-color #009c4e
    border-radius 20px
    height 40px
    font-size 16px
    display flex
    align-items center
    justify-content center
    color white
</style>
